import { modules } from '@/pages/template/constants';
import type { DragItemType } from '@/types/template';

interface DragItemPanelProps {
  draggedItem: DragItemType | null;
  onDragStart: (item: DragItemType) => void;
  onDragEnd: (e: React.DragEvent<HTMLElement>) => void;
}
export default function DragItemPanel({
  draggedItem,
  onDragStart,
  onDragEnd,
}: DragItemPanelProps) {
  return (
    <div className="section-item module-section">
      {modules.map((item) => (
        <div
          className={
            draggedItem?.id === item.id ? 'module-item active' : 'module-item'
          }
          key={item.title}
          draggable
          onDragStart={() => onDragStart(item)}
          onDragEnd={(e) => onDragEnd(e)}
        >
          {item.title}
        </div>
      ))}
    </div>
  );
}
